<template>
  <div id="user-list">
    <u-dialog
      :dialogVisible.sync="createVisible"
      title="添加用户"
      :component="CreatedForm"
      @success="fetchList"
    ></u-dialog>
    <u-dialog
      :dialogVisible.sync="editVisible"
      title="编辑用户"
      :component="CreatedForm"
      :componentModel="editModel"
      @success="fetchList"
    ></u-dialog>
    <u-dialog
      :dialogVisible.sync="moneyOpVisible"
      title="充值/扣费"
      :component="MoneyOperat"
      @success="fetchList"
      :componentModel="moneyModel"
    >
    </u-dialog>
    <u-dialog
      :dialogVisible.sync="balanceVisible"
      title="账单"
      :component="BalanceLog"
      @success="fetchList"
      :componentModel="balanceModel"
    >
    </u-dialog>
    <u-panel title="用户列表">
      <template slot="action-items">
        <a-button-group>
          <a-tooltip title="添加用户" placement="top">
            <a-button icon="plus" @click="handleCreate"></a-button>
          </a-tooltip>
          <a-tooltip title="导出用户" placement="top">
            <a-button icon="download" @click="handleDownload"></a-button>
          </a-tooltip>
          <a-tooltip title="刷新" placement="top">
            <a-button
              icon="reload"
              @click="fetchList"
              :disable="loading"
            ></a-button>
          </a-tooltip>
        </a-button-group>
      </template>
    </u-panel>
    <u-filters>
      <template slot="items">
        <div class="filters-item">
          <a-select
            style="width: 120px"
            v-model="filters.status"
            :loading="loading"
          >
            <a-select-option :value="-1">全部</a-select-option>
            <a-select-option :value="1">启用</a-select-option>
            <a-select-option :value="0">禁用</a-select-option>
          </a-select>
        </div>
        <div class="filters-item">
          <a-input placeholder="通过手机号检索" v-model="filters.mobile">
          </a-input>
        </div>
        <div class="filters-item">
          <a-button icon="reload" @click="handleReset" :loading="loading"
            >重置</a-button
          >
          <a-button icon="search" @click="fetchList" :loading="loading"
            >搜索</a-button
          >
        </div>
      </template>
    </u-filters>
    <a-table
      :columns="columns"
      :dataSource="data"
      rowKey="id"
      size="middle"
      :pagination="pagination"
      @change="handleTableChange"
      :loading="loading"
    >
      <template slot="status" slot-scope="text, record">
        <a-switch
          checkedChildren="启用"
          unCheckedChildren="禁用"
          @change="handleChangeStatus(record)"
          :checked="text ? true : false"
        >
        </a-switch>
      </template>
      <template slot="action" slot-scope="record">
        <!-- 编辑操作 -->
        <a-button-group>
          <a-tooltip
            placement="topLeft"
            title="充值/扣费"
            arrowPointAtCenter
            @click="handleMoneyOperat(record)"
          >
            <a-button icon="pay-circle" size="small"></a-button>
          </a-tooltip>
          <a-button
            icon="edit"
            @click="handleEdit(record)"
            size="small"
          ></a-button>

          <!-- 删除操作 -->
          <a-popconfirm
            title="确认删除该用户，该操作不可逆?"
            @confirm="handleDelete(record.id)"
            okText="确认"
            cancelText="取消"
          >
            <a-button type="danger" icon="delete" size="small"></a-button>
          </a-popconfirm>
        </a-button-group>
      </template>
      <template slot="balance" slot-scope="text, record">
        {{ text | formatMoney }}
        <a-tooltip
          placement="topLeft"
          title="记录"
          arrowPointAtCenter
          @click="handleBalanceLog(record)"
        >
          <a-icon type="hdd" size="small" style="cursor:pointer"></a-icon>
        </a-tooltip>
      </template>
    </a-table>
  </div>
</template>

<script>
const pageSize = 15;
import columns from "./components/list";
import { fetchList, setStatus, deleteUser } from "@/api/user";
import common from "@/utils/common";
import UPanel from "@/components/Panel/Panel";
import UFilters from "@/components/Filters/Filters";
import CreatedForm from "./components/Form";
import MoneyOperat from "./components/MoneyOperat";
import BalanceLog from "./components/BalanceLog";
export default {
  components: {
    UPanel,
    UFilters
  },
  data() {
    return {
      data: [],
      balanceVisible: false,
      createVisible: false,
      editVisible: false,
      moneyOpVisible: false,
      BalanceLog,
      columns,
      CreatedForm,
      MoneyOperat,
      moneyModel: {},
      balanceModel: {},
      editModel: {},
      loading: false,
      filters: {
        page: 1,
        size: pageSize,
        status: -1,
        mobile: ""
      },
      pagination: {
        pageSize,
        total: 0
      }
    };
  },
  created() {
    this.fetchList();
  },
  methods: {
    handleTableChange(pagination) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.filters.page = pager.current;
      this.fetchList();
    },
    fetchList() {
      this.loading = true;
      fetchList(this.filters).then(res => {
        this.loading = false;
        let $data = res.data;
        this.pagination.total = $data.total;
        this.data = $data.data;
      });
    },
    handleChangeStatus(record) {
      record.status = !record.status;
      setStatus(record.id);
    },
    handleCreate() {
      this.createVisible = true;
    },
    handleDownload() {},
    handleReset() {
      this.filters.status = -1;
      this.filters.mobile = "";
      this.fetchList();
    },
    handleEdit(record) {
      this.editVisible = true;
      this.editModel = { ...record };
    },
    handleDelete(id) {
      deleteUser(id).then(() => {
        this.fetchList();
      });
    },
    handleMoneyOperat(record) {
      this.moneyOpVisible = true;
      this.moneyModel = {
        user_id: record.id,
        balance: record.balance
      };
    },
    handleBalanceLog(record) {
      this.balanceVisible = true;
      this.balanceModel = {
        user_id: record.id,
        balance: record.balance
      };
    }
  },
  filters: {
    formatMoney(money) {
      return common.formatMoney(money);
    }
  }
};
</script>

<style lang="less" scoped></style>
